import React from 'react';
import { connect } from 'react-redux';
import { Button, Row, Col, Tooltip, Switch } from 'antd';
import IndicatorList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import IndicatorAdd from './add';
import { DATA_SOURCE_TYPE, ENABLE_STATUS } from '../../../utils/constant';
import Modal from '../../../components/Modal/index';
import RelationStrategy from '../../Strategy/Strategy/relation';
import RelationComponent from '../../Strategy/Strategy/Component/relation';
import AuditStatus from '../../../components/AuditStatus';
import { getCodeByKey } from '../../../utils/utils';

@connect(mapStateToProps)
class IndicatorIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'indicator';
    this.addComponent = IndicatorAdd;
    this.editComponent = IndicatorAdd;
    this.listsComponent = IndicatorList;

    this.state = {
      ...this.state,
      totalCount: 0,
      statistics: {
        feature_total: 0,
        feature_enable: 0,
        feature_disable: 0,
      },
      defaultColumns: [
        'feature_name',
        'app_name',
        'product_name',
        'event_name',
        'data_source_type',
        'create_user_name',
        'update_time',
        'strategy_count',
        'status',
        'audit_label',
        'component_count',
      ],
    };
    if (this.app_id) {
      this.queryTableParams.app_id = this.app_id;
    }
    // if (this.event_id) {
    //   this.queryTableParams.event_id = this.event_id;
    // }
    // if (this.product_id) {
    //   this.queryTableParams.product_id = this.product_id;
    // }
    let data_source_id = getCodeByKey(props.location.search, 'data_source_id');
    if (data_source_id) {
      this.data_source_id = parseInt(data_source_id, 10);
    }
    if (this.field_id) {
      this.queryTableParams.field_id = this.field_id;
    }
  }
  componentDidMount() {
    this.getAppCodeList();
    this.getProductCodeList();
  }

  // 筛选列表，含参数
  freshQueryList = () => {
    this.queryList({
      ...{ data_source_id: this.data_source_id },
      ...this.queryParams,
      ...this.queryTableParams,
      ...this.queryPanigation,
    });
  };

  // 关联策略
  showRelationStrategy = (record) => {
    Modal.open({
      title: <>关联策略<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span></>,
      width: '1000px',
      content: (
        <RelationStrategy
          record={record}
          param={{
            type: 'feature',
            strategy_type: 2,
            app_id: record.app_id,
            event_id: record.event_id,
            feature_id: record.feature_id,
          }}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  // 关联组件
  showRelationComponent = (record) => {
    Modal.open({
      title: <>关联组件<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span></>,
      width: '1000px',
      content: (
        <RelationComponent
          record={record}
          param={{
            type: 'feature',
            strategy_type: 1,
            app_id: record.app_id,
            event_id: record.event_id,
            feature_id: record.feature_id,
          }}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  getColumns = () => {
    return [
      {
        title: '指标名称',
        key: 'feature_name',
        dataIndex: 'feature_name',
        ellipsis: true,
        width: 120,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '所属渠道',
              this.state.applications,
              'app_id',
              this.refreshTableFilterWithAppV2.bind(this, 'app_id'),
              ['app_id', 'app_name']
            )}
          </>
        ),
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        width: 90,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '关联产品',
              this.state.products,
              'product_id',
              this.refreshTableFilterWithAppV2.bind(this, 'product_id'),
              ['product_id', 'product_name']
            )}
          </>
        ),
        key: 'product_name',
        dataIndex: 'product_name',
        ellipsis: true,
        width: 90,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '关联事件',
              this.state.events,
              'event_id',
              this.refreshTableFilterWithAppV2.bind(this, 'event_id'),
              ['event_id', 'event_name']
            )}
          </>
        ),
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        width: 90,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '数据源来源',
              [
                {
                  name: '风控系统',
                  value: '1',
                },
                {
                  name: '自定义',
                  value: '2',
                },
              ],
              'data_source_type',
              this.refreshTableFilter,
              ['value', 'name']
            )}
          </>
        ),
        key: 'data_source_type',
        dataIndex: 'data_source_type',
        ellipsis: true,
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip
              title={record.data_source_type === DATA_SOURCE_TYPE._FENGKONG ? '风控系统' : record.data_source_name}
              placement='topLeft'
            >
              {record.data_source_type === DATA_SOURCE_TYPE._FENGKONG ? '风控系统' : record.data_source_name}
              {/* {record.data_source_type === DATA_SOURCE_TYPE._FENGKONG && <span>风控系统</span>}
              {record.data_source_type === DATA_SOURCE_TYPE._COMSTOM && <span>{record.data_source_name}</span>} */}
            </Tooltip>
          );
        },
      },
      {
        title: '关联组件',
        dataIndex: 'component_count',
        key: 'component_count',
        ellipsis: true,
        align: 'center',
        render: (text, record) => {
          return (
            <Button type='link' onClick={this.showRelationComponent.bind(this, record)}>
              {text}
            </Button>
          );
        },
      },
      {
        title: '关联策略',
        key: 'strategy_count',
        dataIndex: 'strategy_count',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Button type='link' onClick={this.showRelationStrategy.bind(this, record)}>
              {text}
            </Button>
          );
        },
      },
      {
        title: '创建/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_user_name
            ? `${record.create_user_name}/${record.update_user_name}`
            : `${record.create_user_name}/${record.create_user_name}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        },
      },

      {
        title: '修改时间',
        dataIndex: 'update_time',
        key: 'update_time',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_time ? record.update_time : record.create_time;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('状态', this.props.enable_status || [], 'status', this.refreshTableFilter, [
              'key',
              'value',
            ])}
          </>
        ),
        key: 'status',
        dataIndex: 'status',
        ellipsis: true,
        render: (text, record) => {
          return <Switch checked={record.status === ENABLE_STATUS._TRUE} disabled={true} />;
        },
      },
      {
        title: '审核情况',
        key: 'audit_label',
        dataIndex: 'audit_label',
        render: (text, record) => {
          return <AuditStatus text={text} record={record} />;
        },
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入指标名称|自定义数据源名称进行搜索',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6}>
            <Button type='primary' onClick={this.add.bind(this, { title: '添加指标' })}>
              添加指标
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              refresh={this.resetList}
              justify='end'
              columns={this.getColumns()}
              setColumn={this.setColumn}
              defaultColumns={this.state.defaultColumns}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            applications={this.state.applications}
            edit={this.edit}
            copy={this.copy}
            showDetail={this.showDetail}
            onChangePagination={this.onChangePagination}
            defaultColumns={this.state.defaultColumns}
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            rowKey='feature_id'
          />
        </div>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    window_time_unit: state.code.window_time_unit,
    enable_status: state.code.enable_status,
    feature_compose_type: state.code.feature_compose_type,
  };
}
export default IndicatorIndex;
